<template>
  <el-tabs
    tabPosition="left"
    class="el_point"
    @tab-click="handleClick"
    v-model="activeName"
  >
    <el-tab-pane
      v-for="item in pointList"
      :key="item.id"
      :label="item.name"
      :name="item.id"
    >
      <!-- <span slot="label">{{ item.name }}</span> -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { delay } from "@/utils/index";
export default {
  name: "TabPoint",
  props: {
    pointList: {
      type: Array,
      default: () => [
        // {
        //   name: "选项", //标题
        //   id: "option",//需要回到顶部的标题id
        // },
      ],
    },
    //是否开启滚动动画
    isAnimation: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: "",
      flg: false,
      scrollTimer: null,
    };
  },
  watch: {
    pointList: {
      handler: function (newData, oldData) {
        this.activeName = newData.length !== 0 && newData[0].id;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    const that = this;
    this.$nextTick(function () {
      // 监听这个dom的scroll事件
      that.domOnload();
    });
  },
  methods: {
    orderScroll(e) {
      // 加个锁-如果是点击事件,停止滚动事件的触发
      if (this.flg) {
        this.flg = false;
        return;
      }
      // 节流
      delay(() => {
        let aDom = document.querySelector(`#pointBox`);
        let itemDoms = this.pointList;
        /**
         * 外部容器滚动的高度
         */
        let scrollHeight = aDom.scrollTop;
        let additionalHeight = 0;
        for (let index = 0; index < itemDoms.length; index++) {
          const className = document.getElementById(itemDoms[index].id);
          let height = className.offsetHeight;
          /**
           * item累加的高度 additionalHeight
           */
          additionalHeight += height;
          if (additionalHeight >= scrollHeight) {
            /**
             * 触发修改选中的active变量
             */
            this.changeChooseCircle(index);
            break;
          }
        }
      }, 300);
    },
    changeChooseCircle(index) {
      this.activeName = this.pointList[index].val;
      this.flg = false;
    },
    domOnload() {
      let domScroll = document.querySelector("#pointBox");
      domScroll.removeEventListener("scroll", this.orderScroll);
      // 监听之前先销毁上一次监听
      domScroll.addEventListener("scroll", this.orderScroll);
      // 监听dom滚动事件
    },
    handleClick(e) {
      this.flg = true;
      const that = this;
      const scrollBox = document.querySelector("#pointBox"); // 容器
      const { index } = e;
      const id = this.pointList[index].val;
      let distance = scrollBox.scrollTop;
      this.activeName = id;
      const curTag = document.querySelector("#" + id); // 节点tag
      const offsetTop = curTag && curTag.offsetTop - 70; // 滚动距离
      let step = offsetTop / 50;
      if (offsetTop > distance) {
        smoothDown();
      } else {
        const newTotal = distance - offsetTop;
        step = newTotal / 50;
        smoothUp();
      }
      scrollBox.scrollTop = offsetTop;
      function smoothDown() {
        if (distance < offsetTop && that.isAnimation == true) {
          distance += step;
          scrollBox.scrollTop = distance;
          setTimeout(smoothDown, 10);
        } else {
          scrollBox.scrollTop = offsetTop;
        }
      }
      function smoothUp() {
        if (distance > offsetTop && that.isAnimation == true) {
          distance -= step;
          scrollBox.scrollTop = distance;
          setTimeout(smoothUp, 10);
        } else {
          scrollBox.scrollTop = offsetTop;
        }
      }
    },
  },
};
</script>

<style >
.el_point /deep/ .el-tabs__nav-scroll {
  /* margin-right: 26px; */
}
.el_point /deep/ .el-tabs--right {
  /* margin-right: 26px; */
}
.el-tabs--left,
.el_point .el-tabs--right {
  overflow: inherit;
}
</style>